<template>
  <div class="percentage">
    <div class="bar" :style="{ width: num + '%' }"></div>
    <div class="bar2" v-if="num2" :style="{ width: num2 + '%' }"></div>
  </div>
</template>

<script lang="ts" setup>
  defineOptions({ name: 'Percentage' });

  defineProps({
    num: { type: Number, default: 0 },
    num2: { type: Number, default: 0 },
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .percentage {
    width: 100%;
    height: 12px;
    background: #003E7E;
    display: flex;
    align-items: center;
    .bar {
      width: auto;
      height: 100%;
      position: relative;
      background: linear-gradient(270deg, rgba(6, 183, 253, 0.6) 10%, rgba(6, 183, 253, 0) 100%);
      &::after {
        content: '';
        width: 6px;
        height: 100%;
        background: url(./images/bar1.png) no-repeat;
        background-size: contain;
        position: absolute;
        right: -4px;
        top: 0px;
      }
    }
    .bar2 {
      width: auto;
      height: 100%;
      position: relative;
      background: linear-gradient(270deg, rgba(35, 223, 123, 0.6) 10%, rgba(35, 223, 123, 0) 100%);
      &::after {
        content: '';
        width: 6px;
        height: 100%;
        background: url(./images/bar2.png) no-repeat;
        background-size: contain;
        position: absolute;
        right: -4px;
        top: 0px;
      }
    }
  }
</style>
